<template>
  <div class="coat">
    <el-container>
      <el-header class="theHeader" height="80px">
        <div class="buttonBox">
          <div @click="forwardTo('/unit')"><img src="@/assets/images/unitStatBlue.png" alt=""></div>
          <div @click="forwardTo('/cars')"><img src="@/assets/images/carsStatBlue.png" alt=""></div>
          <div @click="forwardTo('/company')"><img src="@/assets/images/companyStatBlue.png" alt=""></div>
        </div>
        <div class="buttonBox">
          <div @click="forwardTo('/dispatch')"><img src="@/assets/images/dispatchStatOrange.png" alt=""></div>
          <div @click="forwardTo('/expense')"><img src="@/assets/images/expenseStatBlue.png" alt=""></div>
        </div>
      </el-header>
      <el-container class="upperContainer">
        <el-main>
          <div class="theBlock">
            <TheTitle theSize="small" theType="thin">
              <template #first>
                <span class="theFirst">派车情况统计</span>
              </template>
              <template #last>
                <span class="theLast">按照派车单状态对派车单进行统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to right, rgba(0,132,243,0.1), rgba(0,132,243,0));">
              <PieBar :data=pieBarData>
                <template #theSlot>
                  <span class="theSlot">派车次数</span>
                </template>
              </PieBar>
            </div>
          </div>
          <CuttingLine theSize="small" />
          <div class="theBlock" style="margin-top: 20px;">
            <TheTitle theSize="small" theType="thin">
              <template #first>
                <span class="theFirst">用车/回车时间段统计</span>
              </template>
              <template #last>
                <span class="theLast">按照派车单实际出车/回车时间段统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <MultiLines :data=dataDouble />
            </div>
          </div>
          <CuttingLine theSize="small" />
        </el-main>
        <el-main class="middleMain">
          <div class="middleTagBox">
            <el-date-picker :clearable="false" :prefix-icon="PointerDown" class="middleSelect" :editable="false"
              v-model="dateStart" type="date" placeholder="开始日期" value-format="x">
            </el-date-picker>
            <el-date-picker :clearable="false" :prefix-icon="PointerDown" class="middleSelect" :editable="false"
              v-model="dateEnd" type="date" placeholder="结束日期" value-format="x">
            </el-date-picker>
            <el-select :suffix-icon="PointerDown" :teleported="false" class="middleSelect" v-model="middleSelect"
              value-key="" placeholder="地区" @change="">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div id="theMap" style="height: 600px; width: 740px;"></div>
        </el-main>
        <el-main class="rightMain">
          <div class="theBlock">
            <TheTitle theSize="small" theType="thin">
              <template #first>
                <span class="theFirst">派车单类型统计</span>
              </template>
              <template #last>
                <span class="theLast">按照派车单类型对派车单进行统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to right, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <DoubleDeckPie :data=dataType />
            </div>
          </div>
          <CuttingLine theSize="small" />
          <div class="theBlock" style="margin-top: 20px;">
            <TheTitle theSize="small" theType="thin">
              <template #first>
                <span class="theFirst">车辆空驶率统计</span>
              </template>
              <template #last>
                <span class="theLast">按照车辆在无任务状态下的空驶时间占比</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to right, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <TagsPie :data=dataCarsEmpty />
            </div>
          </div>
          <CuttingLine theSize="small" />
        </el-main>
      </el-container>

      <el-container>
        <el-main class="downMain">
          <div class="block">
            <TheTitle theSize="medium" theType="thin">
              <template #first>
                <span class="theFirst">派车响应速度统计</span>
              </template>
              <template #last>
                <span class="theLast">按照预计出车到实际出车的相应占比</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <SinglePie :data=dataSingleOne />
            </div>
          </div>
          <CuttingLine theSize="medium" />
        </el-main>
        <el-main class="downMain">
          <div class="block">
            <TheTitle theSize="medium" theType="thin">
              <template #first>
                <span class="theFirst">派车超时率统计</span>
              </template>
              <template #last>
                <span class="theLast">统计任务超时实际回车大于预计回车时间占比</span>
              </template>
            </TheTitle>
            <div
              style="background: linear-gradient(to left, rgba(0, 132, 243, 0.1), rgba(0, 132, 243, 0),rgba(0, 132, 243, 0.1)); ">
              <SinglePie :data=dataSingleTwo />
            </div>
          </div>
          <CuttingLine theSize="medium" />
        </el-main>
        <el-main class="downMain">
          <div class="block">
            <TheTitle theSize="medium" theType="thin">
              <template #first>
                <span class="theFirst">三化订单统计</span>
              </template>
              <template #last>
                <span class="theLast">按照订单类型对三化订单进行统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <SinglePie :data=dataSingleThree />
            </div>
          </div>
          <CuttingLine theSize="medium" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { reactive, computed, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
import shijiazhuang from '@/assets/shijiazhuang.json'


import TheTitle from '@/components/TheTitle.vue';
import CuttingLine from '@/components/CuttingLine.vue';
import PieBar from '@/components/PieBar.vue';
import DoubleDeckPie from '@/components/DoubleDeckPie.vue';
import TagsPie from '@/components/TagsPie.vue';
import MultiLines from '@/components/MultiLines.vue';
import SinglePie from '@/components/SinglePie.vue';

import theMapSymbol from '@/assets/images/mapSymbol.png'

import { forwardTo } from '@/hook/forwardTo';

import PointerDown from '@/components/PointerDown.vue'

const dateStart = ref('')
const dateEnd = ref('')
const middleSelect = ref('')
const options = [
  {
    value: '石家庄',
    label: '石家庄'
  },
  {
    value: '',
    label: '清空选项'
  }
]
watch([dateStart, dateEnd],
  (newV) => {
    if ((newV[0] == '' || newV[1] == '') == false) {
      if (newV[0] > newV[1]) {
        console.log('开始时间不能晚于结束时间')
        dateStart.value = '';
        dateEnd.value = '';
      }
    }
  })


onMounted(() => {
  getTheMap()
})
const convertData = (data) => {
  let geoCoordMap = {
    长安区: [114.52, 38.15],
    桥西区: [114.47, 37.15],
    新华区: [114.87, 38.42],
    井陉矿区: [114.05, 38.18],
    裕华区: [114.52, 38.12],
    井陉县: [114.13, 38.13],
    正定县: [114.57, 38.25],
    栾城县: [114.65, 37.98],
    行唐县: [114.55, 38.53],
    灵寿县: [114.37, 38.4],
    高邑县: [114.6, 37.7],
    深泽县: [115.2, 38.28],
    赞皇县: [114.38, 37.77],
    无极县: [114.97, 38.28],
    平山县: [114.2, 38.35],
    元氏县: [114.52, 37.85],
    赵县: [114.77, 37.85],
    辛集市: [115.22, 38.02],
    藁城区: [114.83, 38.13],
    晋州市: [115.03, 38.13],
    新乐市: [114.68, 38.45],
    鹿泉区: [114.3, 38.18],
  };
  let res = [];
  for (let i = 0; i < data.length; i++) {
    let geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value),
      });
    }
  }
  return res;
}
const getTheMap = () => {
  var chartDom = document.getElementById('theMap');
  var myChart = echarts.init(chartDom);
  echarts.registerMap("shijiazhuang", shijiazhuang)
  var option;

  option = {
    tooltip: {},
    geo: [
      {
        show: false,
        map: "shijiazhuang",
        zlevel: -1,
        zoom: 1.3,
        roam: false,
        itemStyle: {
          opacity: 1,
        },
        label: {
          show: false,
        },
      },
    ],
    series: [
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'image://' + theMapSymbol,
        symbolSize: 50,
        zlevel: 2,
        data: convertData([
          {
            name: '长安区',
            value: 5,
          },
          {
            name: '平山县',
            value: 5,
          },
          {
            name: '灵寿县',
            value: 5,
          },
          {
            name: '正定县',
            value: 5,
          },
        ]),
      },
    ],
  }
  option && myChart.setOption(option)
}

const reviewing = 4907
const passed = 3135
const readyForDelivery = 2317
const stockpPending = 2045
const pieBarData = reactive({
  dataX: [reviewing, passed, readyForDelivery, stockpPending],
  dataY: ['审批中', '已通过', '待出库', '待入库',],
  sum: computed(() => {
    return reviewing + passed + readyForDelivery + stockpPending
  }).value,
  theColorList: ['#1C60FE', '#6e91e3', '#1c60fe', '#35e0ff'],
  pieId: 'carSendPie',
  barId: 'carSendBar',
})

const dataType = {
  id: 'paiCheType',
  data: [
    { value: 12454, name: '紧急调查' },
    { value: 13454, name: '自有用车' },
    { value: 14454, name: '一键派车' },
    { value: 15454, name: '统管用车' },
  ],
  sum: 55816,
  theColorList: ['#10ffff', '#10ff61', '#4053ff', '#108cff',],
  innerContent: { text: '新能源车辆', value: '435' }
}

const dataCarsEmpty = {
  data: [
    { value: 12454, name: '空驶' },
    { value: 24908, name: '正常' }],
  sum: 37362,
  id: 'kongShi',
  type: 'percent',
  theColorList: ['#0085ff', '#31dea1',]
}


function generateArray(start, end) {
  return Array.from(new Array(end + 1).keys()).slice(start)
}
const avg = generateArray(0, 25)
const xAxisArr = JSON.parse(JSON.stringify(avg))
const dataDouble = {
  xAxisArr: xAxisArr,
  legend: ['出车量', '会车量'],
  dataA: [50, 90, 100, 120, 130, 140, 50, 90, 100, 120, 130, 90, 50, 70, 60, 120, 160, 140, 50, 90, 100, 120, 130, 140, 50, 90,],
  dataB: [60, 120, 160, 90, 50, 70, 60, 120, 160, 90, 50, 90, 100, 120, 130, 140, 50, 70, 60, 120, 160, 90, 50, 70, 90, 50,],
  id: 'yongCheHuiChe',
  theColorList: ['#46cccd', '#ffffff', '#ffffff', '#ffffff']
}

const dataSingleOne = {
  id: 'singleOne',
  data: [
    {
      value: 12454, name: '实际出车'
    }, {
      value: 17198, name: '未出车'
    }
  ],
  sum: 29652,
  theColorList: ['#39ffb4', '#93bae7'],
  type: 'percent',
  percentInner: { text: '实际响应占比', percent: '42%' }
}

const dataSingleTwo = {
  id: 'singleTwo',
  data: [
    {
      value: 12454, name: '实际回车'
    }, {
      value: 17198, name: '未回车'
    }
  ],
  sum: 29652,
  theColorList: ['#2cdfff', '#006dee'],
  type: 'percent',
  percentInner: { text: '派车超时率', percent: '42%' }
}

const dataSingleThree = {
  id: 'singleThree',
  data: [
    {
      value: 12454, name: '加油'
    }, {
      value: 13198, name: '维保'
    }, {
      value: 14198, name: '保险'
    }, {
      value: 15198, name: '充电'
    }
  ],
  sum: 55048,
  theColorList: ['#9e7bff', '#006dee', '#ffe7a8', '#39ffb4'],
  sumOrSingle: '订单数量'
}

</script>
<style scoped>
#theMap {
  background-image: url('@/assets/images/theMap.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
</style>